@mixin addSafeArea($px: 0rpx) {
  padding-bottom: calc(constant(safe-area-inset-bottom) + #{$px});
  padding-bottom: calc(env(safe-area-inset-bottom) + #{$px});
}

@mixin addSafeAreaHeight($px: 0rpx) {
  height: calc(constant(safe-area-inset-bottom) + #{$px});
  height: calc(env(safe-area-inset-bottom) + #{$px});
}

@mixin flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin positionCenter($type: absolute) {
  position: $type;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}